<template>
	<view>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view>
					<cmd-cel-item title="头像" slot-right >
						<cmd-avatar src="/static/logo/logo.png"></cmd-avatar>
					</cmd-cel-item> 
					<!-- <cmd-cel-item title="头像" slot-right arrow >
						<avatar 
							selWidth="400upx" selHeight="400upx" @upload="myUpload" :avatarSrc="info.pic || '/static/logo/108X108.png'"
							avatarStyle="width: 100upx; height: 100upx; border-radius: 100%; ">
						</avatar>	
					</cmd-cel-item> -->
					
					<cmd-cel-item title="昵称" :addon="info.userxm?info.userxm:'游客'" arrow @click="editNickName"></cmd-cel-item>
					<cmd-cel-item title="性别" :addon="info.sex===null?'':info.sex==1?'女':'男'" arrow @click="editUserSex"></cmd-cel-item>
					<cmd-cel-item title="QQ" :addon="info.qq?info.qq:''" arrow @click="editUserQq"></cmd-cel-item>
					<cmd-cel-item title="微信" :addon="info.wechat?info.wechat:''" arrow @click="editUserWechat"></cmd-cel-item>
					<cmd-cel-item title="手机号码" :addon="info.username" @click="editPhoneNumber"></cmd-cel-item>
					<cmd-cel-item title="修改密码" @click="editPassword" arrow></cmd-cel-item>
					<button class="btn-logout" @click="logout">退出登录</button>
				</view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
	import Uploader from '@/common/thamiti-uploader/upload_img.js'
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
	import cmdCelItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
	import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import listCell from '@/components/mix-list-cell';
	
	import avatar from "@/components/yq-avatar/yq-avatar.vue";

	
	import userApi from "@/api/user.js"
	let _this;
	export default {
		components: {
			cmdNavBar,
			cmdPageBody,
			cmdTransition,
			cmdCelItem,
			cmdAvatar,
			listCell,
			avatar
		},

		data() {
			return {
				info: {}
			};
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			_this.info = uni.getStorageSync('user')
			console.log(_this.info)
		},
		methods: {
			myUpload(rsp) {
				console.log(rsp)
                _this.info.pic = rsp.path; //更新头像方式一
				//rsp.avatar.imgSrc = rsp.path; //更新头像方式二
				userApi.UpHeardimage(rsp.path).then(uploadRes=>{
					//更新接口
					let userInfo = uni.getStorageSync('user');
					debugger
					userInfo.pic = uploadRes.data
					userInfo.phone = userInfo.username
					userApi.updateMaterial(userInfo).then(res=>{
						if(res.status==='0'){
							uni.showToast({
							    icon: 'success',
							    title: '修改成功'
							});
							// _this.getUserinfo();
							uni.setStorageSync('user',userInfo)
						}
					}).catch(err=>{
							console.log(err)
					})
				})
				
            },
			// getUserinfo(){
			//     let {usercode} = uni.getStorageSync('user')
			// 	userApi.userInfo({usercode}).then(res=>{
			// 		console.log(res);
			// 		if(res.status==='0'){
			// 			_this.info=res.data;
			// 			console.log(_this.info);
			// 		}
			// 		
			// 	}).catch(err=>{
			// 		console.log(err)
			// 	})
			// },
			editAvatar() {
				console.log('修改头像')
				let uploader = new Uploader()

				uploader.choose_and_upload(1).then(res => {
					console.log(res)
					
					uni.uploadFile({
						url: 'http://39.97.161.226/zyfk_kf/index.php/home/User/UpHeardimage', //仅为示例，非真实的接口地址
						filePath: res.path,
						name: 'file',
						success: (uploadFileRes) => {
							console.log(uploadFileRes.data);
						},
						complete:(com)=>{
							console.log(com)
						}
					});
					
				})

			},
			editNickName() {
				let userxm = _this.info.userxm?_this.info.userxm:''
				uni.navigateTo({
					url: `/pages/user/info/editNickName?userxm=${userxm}`
				})
			},
			editUserSex() {
				let sex = _this.info.sex===null?'':_this.info.sex
				uni.navigateTo({
					url: `/pages/user/info/editSex?sex=${sex}`
				})
			},
			editUserQq() {
				let qq = _this.info.qq?_this.info.qq:''
				uni.navigateTo({
					url: `/pages/user/info/editQq?qq=${qq}`
				})
			},
			editUserWechat() {
				let wechat = _this.info.wechat?_this.info.wechat:''
				uni.navigateTo({
					url: `/pages/user/info/editWechat?wechat=${wechat}`
				})
			},
			editUserName() {
				uni.navigateTo({
					url: '/pages/user/info/editUserName'
				})
			},
			editPhoneNumber() {
				uni.showToast({
					icon: 'none',
					title: '手机号码暂时无法更改'
				});
				// uni.navigateTo({
				// 	url:'/pages/user/info/editPhoneNumber'
				// })
			},
			editPassword() {
				uni.navigateTo({
					url: '/pages/login/forget'
				})
			},
			logout() {
				//user verifyCode verifyPhone
				uni.removeStorageSync('user')
				uni.removeStorageSync('verifyCode')
				uni.removeStorageSync('verifyPhone')
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}

		}
	}
</script>

<style lang="scss">
	.btn-logout {
		margin-top: 220upx;
		width: 80%;
		border-radius: 50upx;
		font-size: 16px;
		background: $uni-color-primary;
		color: #fff;
	}

	.btn-logout-hover {
		background: linear-gradient(to right, #365fdd, #36bbfa);
	}
</style>
